<!-- src/App.vue -->
<template>
  <q-layout view="hHh lpr fFf">
    <q-header reveal elevated class="layout bg-primary text-white full-width" height-hint="98">
      <div class="layout-content">
        <q-toolbar class="row justify-between q-pa-none">
          <q-toolbar-title class="col-2 text-left text-weight-bolder">AI RESUME</q-toolbar-title>
          <!-- 搜索栏 -->
          <q-input
              v-model="searchText"
              label="搜索" dense
              outlined
              borderless
              bg-color="white"
              class="col-5 full-height"
              @keydown.enter="search"
          >
            <template #append>
              <q-icon class="cursor-pointer" name="search" @click="search"/>
            </template>
          </q-input>
          <q-tabs class="col-2 row " align="right">
            <q-route-tab label="招聘员" class="q-pr-none col" content-class="text-white"
                         @click="changeView('/recruiter-view', RECRUITER_ROLE)"/>
            <q-separator vertical color="white" size="1px" class="q-mx-sm"/>
            <q-route-tab class="q-pa-none q-ma-none col" content-class="full-width full-height text-white"
                         @click="changeView('/job-seeker-view', JOB_SEEKER_ROLE)">
              <q-btn-dropdown label="求职者" dense class="full-height full-width" flat unelevated padding="0">
                <q-list>
                  <q-item clickable v-close-popup @click="manageResume">
                    <q-item-section>个人简历</q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </q-route-tab>
          </q-tabs>
        </q-toolbar>
      </div>
    </q-header>
    <q-page-container class="layout" style="width: 100vw">
      <div class="layout-content">
        <router-view v-slot="{ Component }">
          <component ref="view" :is="Component" />
        </router-view>
      </div>
    </q-page-container>
    <q-dialog v-model="displayResume">
      <resume/>
    </q-dialog>
  </q-layout>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
import Resume from "./components/Resume.vue";
import {JOB_SEEKER_ROLE, RECRUITER_ROLE} from "./vite-env.d";
import type UserRole from "./vite-env.d"
import {LocalStorageUtil} from "./assets/local-storage.ts";
const router = useRouter();
const searchText = ref<string>('')
const displayResume = ref<boolean>(false)
const currentUserRole = ref<UserRole>(JOB_SEEKER_ROLE)
const view = ref(null)
const search  = () => {
  if (currentUserRole.value == JOB_SEEKER_ROLE) {
    view?.value?.searchJob(searchText.value)
  }
  if (currentUserRole.value == RECRUITER_ROLE) {
    view?.value?.searchJob(searchText.value)
  }
}
const manageResume = async () => {
  displayResume.value = true
}
const changeView = async (pageUrl: string, userRole: UserRole) => {
  await LocalStorageUtil.changeUser(userRole)
  currentUserRole.value = userRole
  await router.replace(pageUrl)
}
</script>